<script setup>

import {ref, onMounted, watch, computed} from 'vue';
import axios from "axios";
import {snackbar} from './store'
import moment from 'moment'

// 查询
const itemsPerPage = ref(10);
const sumComputed = ref({
    sumAll: 0,
    sumNo: 0,
    all1: 0,
    no1: 0,
    all2: 0,
    no2: 0
});
const totalItems = ref(0);
const headers = ref([
    {title: '序号', key: 'num', sortable: false},
    {title: '地点', key: 'fire_name', sortable: false},
    {title: `总巡检次数(${sumComputed.value.sumAll}/${totalItems.value})`, key: 'count_sum', sortable: false},
    {title: `上半月巡检次数(${sumComputed.value.all1}/${totalItems.value})`, key: 'count_1', sortable: false},
    {title: `下半月巡检次数(${sumComputed.value.all2}/${totalItems.value})`, key: 'count_2', sortable: false},
    {title: '操作', key: 'actions', sortable: false }
]);
const headersRecord = [
    {title: '序号', key: 'num', sortable: false},
    {title: '巡检地点', key: 'place_name', sortable: false},
    {title: '巡检内容', key: 'check_content', sortable: false},
    {title: '巡检人', key: 'nickname', sortable: false},
    {title: '巡检时间', key: 'record_time', sortable: false}
];
const items = ref([]);
const loading = ref(true);
const totalItemsRecord = ref(0);
const dateSearch = ref(new Date());
const isShow = ref(false);
const dialogType = ref('');
const recordList = ref([])

const search = ref(moment(new Date()).format('YYYY-MM-01'));
const name = ref(moment(new Date()).format('YYYY-MM-01'));
const fireName = ref(null);
const selectType = ref('0');
watch(name, () => {
    loadItems()
})
watch(fireName, () => {
    loadItems()
})

function loadItems() {
    loading.value = true;
    axios.post('/checkFireRecord/getMonthRecord', {
        date: name.value,
        fireName: fireName.value
    }).then(({data}) => {
        items.value = data.data;
        sumComputed.value.sumAll = 0
        sumComputed.value.sumNo = 0
        sumComputed.value.all1 = 0
        sumComputed.value.no1 = 0
        sumComputed.value.all2 = 0
        sumComputed.value.no2 = 0
        items.value.forEach(k => {
            if(k.count_sum == 2) {
                sumComputed.value.sumAll ++
            } else {
                sumComputed.value.sumNo ++
            }
            if(k.count_1) {
                sumComputed.value.all1 ++
            } else {
                sumComputed.value.no1 ++
            }
            if(k.count_2) {
                sumComputed.value.all2 ++
            } else {
                sumComputed.value.no2 ++
            }
        })
        totalItems.value = data.data.length;
        headers.value = ([
            {title: '序号', key: 'num', sortable: false},
            {title: '地点', key: 'fire_name', sortable: false},
            {title: `总巡检次数(${sumComputed.value.sumAll}/${totalItems.value})`, key: 'count_sum'},
            {title: `上半月巡检次数(${sumComputed.value.all1}/${totalItems.value})`, key: 'count_1'},
            {title: `下半月巡检次数(${sumComputed.value.all2}/${totalItems.value})`, key: 'count_2'},
            {title: '操作', key: 'actions', sortable: false }
        ])
        loading.value = false;
    })
}

onMounted(() => {
    loadItems();
});

// 增改
const isShowDialog = ref(false)

function changeDate() {
    name.value = moment(dateSearch.value).format('YYYY-MM-01')
    isShowDialog.value = false
}

function clickEdit(item) {
    let obj = {
        date: name.value,
        fireId: item.fire_id
    }
    dialogType.value = item.fire_name
    axios.post('/checkFireRecord/getMonthRecordDetail', obj).then(res => {
        recordList.value = res.data.data
        totalItemsRecord.value = recordList.value.length
        isShow.value = true
    })
}

function changeSelectType(val) {
    if(val == 1) {
        headers.value = [
            {title: '序号', key: 'num', sortable: false},
            {title: '地点', key: 'fire_name', sortable: false},
            {title: `上半月巡检次数(${sumComputed.value.all1}/${totalItems.value})`, key: 'count_1'},
            {title: '操作', key: 'actions', sortable: false }
        ]
    }
    if(val == 2) {
        headers.value = [
            {title: '序号', key: 'num', sortable: false},
            {title: '地点', key: 'fire_name', sortable: false},
            {title: `下半月巡检次数(${sumComputed.value.all2}/${totalItems.value})`, key: 'count_2'},
            {title: '操作', key: 'actions', sortable: false }
        ]
    }
    if(val == 0) {
        headers.value = [
            {title: '序号', key: 'num', sortable: false},
            {title: '地点', key: 'fire_name', sortable: false},
            {title: `总巡检次数(${sumComputed.value.sumAll}/${totalItems.value})`, key: 'count_sum'},
            {title: `上半月巡检次数(${sumComputed.value.all1}/${totalItems.value})`, key: 'count_1'},
            {title: `下半月巡检次数(${sumComputed.value.all2}/${totalItems.value})`, key: 'count_2'},
            {title: '操作', key: 'actions', sortable: false }
        ]
    }
}

function downloadFile() {
    let obj = {
        date: name.value,
        fireName: fireName.value
    }
    axios({
        method: "POST",
        url: "/checkFireRecord/monthExport",
        responseType: 'blob',
        data: obj
    }).then(res => {
        console.log(res)
    }, err => {
        let blob = new Blob([err.data], {type: "application/vnd.ms-excel"});
        let fileName = `${name.value}消防月报表.xls`
        if ("download" in document.createElement("a")) {
            // 支持a标签download的浏览器
            const link = document.createElement("a"); // 创建a标签
            link.download = fileName; // a标签添加属性
            link.style.display = "none";
            link.href = URL.createObjectURL(blob);
            document.body.appendChild(link);
            link.click(); // 执行下载
            URL.revokeObjectURL(link.href); // 释放url
            document.body.removeChild(link); // 释放标签
        } else {
            // 其他浏览器
            navigator.msSaveBlob(blob, fileName);
        }
    })
}

</script>

<template>
    <v-toolbar density="compact">
        <v-toolbar-title>消防月报表</v-toolbar-title>
        <v-select @update:modelValue="changeSelectType" v-model="selectType" hide-details :items="[{value: '0', title: '整月'},{value: '1', title: '上半月'},{value: '2', title: '下半月'}]"></v-select>
        <v-text-field v-model="fireName" :clearable="true" hide-details placeholder="查询地点"></v-text-field>
        <v-text-field v-model="name" readonly :clearable="true" hide-details placeholder="巡检时间" @click="isShowDialog = true"></v-text-field>
        <v-dialog v-model="isShowDialog" max-width="500px">
            <v-date-picker v-model="dateSearch" @update:model-value="changeDate" type="month"></v-date-picker>
        </v-dialog>
        <v-btn icon="mdi-upload" @click="downloadFile"></v-btn>
    </v-toolbar>
  <!--  分页文本待更换   items-per-page-text="每页数量"-->
    <v-data-table :items-per-page="totalItems" :headers="headers" :items-length="totalItems"
    :items="items"
    :loading="loading"
    class="elevation-1"
    items-per-page-text="每页数量"
    @update:options="loadItems">
        <template v-slot:item.num="{ index }">
            <span>{{ index + 1 }}</span>
        </template>
        <template v-slot:item.isCheck="{ item }">
            <span v-if="item.raw.isCheck == 0">未巡检</span>
            <span v-if="item.raw.isCheck == 1">已巡检</span>
        </template>
        <template v-slot:item.actions="{ item }">
            <v-btn icon="mdi-file-find" variant="text" @click="clickEdit(item.raw)"></v-btn>
        </template>
    </v-data-table>

    <v-dialog v-model="isShow" max-width="800px">
        <v-card>
            <v-card-title>{{ dialogType }}</v-card-title>
            <v-data-table-server
            :items-per-page="totalItemsRecord"
            :headers="headersRecord"
            :items-length="totalItemsRecord"
            :items="recordList"
            class="elevation-1"
            items-per-page-text="每页数量">
                <template v-slot:item.num="{ index }">
                    <span>{{ index + 1 }}</span>
                </template>
            </v-data-table-server>
            <v-card-actions>
                <v-btn color="primary" variant="text" @click="isShow = false">关闭</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<style scoped lang="less">

</style>
